<script setup>
import {toRefs} from "vue";
import {ElMessage} from "element-plus";

const props = defineProps({
  form: {
    type: Array,
    default: []
  },
})

const emit = defineEmits(['update:form', 'saveAll']);
let {form} = toRefs(props);


const addRow = () => {
  form.value.push({name: '', description: '', type: 'STRING', notNull: 'false'});
};

const saveAll = () => {
  emit('update:form', form.value);
  emit('saveAll');
  ElMessage.success('保存成功');
};


const handleDelete = (index) => {
  form.value.splice(index, 1);
};
</script>

<template>
  <div>
    <el-table :data="form" style="width: 100%">
      <el-table-column prop="name" label="名称">
        <template #default="scope">
          <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述">
        <template #default="scope">
          <el-input v-model="scope.row.description" placeholder="请输入描述"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型">
        <template #default="scope">
          <el-select v-model="scope.row.type" placeholder="类型">
            <el-option key="STRING" label="STRING" value="STRING"></el-option>
            <el-option key="NUMBER" label="NUMBER" value="NUMBER"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="nullable" label="是否必需">
        <template #default="scope">
          <el-select v-model="scope.row.notNull" placeholder="是否必需">
            <el-option key="true" label="是" value="true"></el-option>
            <el-option key="false" label="否" value="false"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">新增行</el-button>
    <el-button type="primary" @click="saveAll">保存</el-button>
  </div>
</template>

<style scoped>

</style>